/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-12 15:14:56
 * @LastEditTime : 2023-06-21 11:26:51
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Train.jsx
 * @Description  :
 */
import './Scss/Train.scss'
import { Http } from '../../../../Api'
import { useRequest, useSessionStorageState } from 'ahooks'
import { useEffect, useState } from 'react'
import { RingProgressSetUp } from './Common'
import { RingProgress } from '@ant-design/plots'
import { ICON } from '../../../../Configure/Icon'
import { colorRgb } from '../../../../Configure/Common'

// 安全培训
export const Train001 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [chartsData, setChartsData] = useState()
    const [backColor, setBackColor] = useState()
    const [Data, setData] = useState([
        { uuid: 1, title: '培训人数', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen3', unit: '人' },
        { uuid: 2, title: '培训次数', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen4', unit: '人/次' },
        { uuid: 3, title: '培训时长', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen9', unit: '时长' },
    ])
    const { run: getSecurityStatSecurityTrainingStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.list.length === 0) return false
            const [{ percentd, trainingHours, trainingPersonCount, trainingPersonNum }] = res.list
            Data.find(v => v.uuid === 1).value = trainingPersonCount || 0
            Data.find(v => v.uuid === 2).value = trainingPersonNum || 0
            Data.find(v => v.uuid === 3).value = trainingHours || 0
            setData([...Data])
            setBackColor(`rgba(${colorRgb(temporaryData.themeColor, 1)},0.1)`)
            setChartsData(RingProgressSetUp(percentd || 0, colorRgb(temporaryData.themeColor, 1), '合格率'))
        },
    })

    useEffect(() => {
        getSecurityStatSecurityTrainingStat({ url: 'getTrainingPersonStatistics' })
    }, [getSecurityStatSecurityTrainingStat])

    return (
        <div className="Train001">
            <div className="HomePageTitle">安全培训</div>
            <div className="Box" style={{ '--theme': temporaryData.themeColor, '--backColor': backColor }}>
                {chartsData && <RingProgress {...chartsData} />}
                <div className="list">
                    {Data.map(({ uuid, title, value, icon, unit }) => (
                        <div key={uuid}>
                            <div>{ICON[icon]}</div>
                            <div>
                                <div>{title}</div>
                                <div>
                                    {value} <span>{unit}</span>{' '}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
